import 'package:flutter/material.dart';
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';

class TimUIStickerFull extends StatelessWidget {

  final List<CustomStickerPackage> customStickerPackageList;
  final void Function(String name, int index)? ontap;

  const TimUIStickerFull(
      {super.key, required this.customStickerPackageList, this.ontap});

  @override
  Widget build(BuildContext context) =>
      Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(top: 12, bottom: 30),
            child: SizedBox(
              height: 20,
              child: Center(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.black26,
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                  ),
                  width: 40, height: 6,
                ),
              ),
            ),
          ),
          Text(
            "贴纸", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            textAlign: TextAlign.start,),
          SizedBox(height: 8,),
          Text("由 FunShot 创建", style: TextStyle(fontSize: 14,
              fontWeight: FontWeight.normal,
              color: Colors.black26), textAlign: TextAlign.start,),
          if(customStickerPackageList.isNotEmpty)
            Expanded(
              child: CustomScrollView(
                slivers: [
                  SliverList.builder(
                    itemCount: customStickerPackageList.length,
                    itemBuilder: (ct,index) {
                      final ele = customStickerPackageList[index];
                      final stickerList = ele.stickerList;

                      return Column(
                        children: [
                          Row(children: [
                            Text(ele.name, style: TextStyle(color: Colors.black,
                                fontSize: 16,
                                fontWeight: FontWeight.bold),),
                            Padding(padding: EdgeInsets.symmetric(horizontal: 8),
                              child: Icon(Icons.play_circle_outline, size: 20,),
                            ),
                            Text("FunShot", style: TextStyle(color: Colors.grey),)
                          ],),
                          SizedBox(
                              height: 80,
                              child: SingleChildScrollView(
                                scrollDirection: Axis.horizontal,
                                child:
                                stickerList.isEmpty ? SizedBox.shrink() :
                                Row(
                                  children: (stickerList ?? [])
                                      .take(7)
                                      .map((item) {
                                    LayerLink layerLink = LayerLink();
                                    return GestureDetector(
                                      behavior: HitTestBehavior.translucent,
                                      onTap: () {
                                        if (ontap != null) ontap!(ele.name, index);
                                      },
                                      child: Padding(
                                        padding: const EdgeInsets.all(8),
                                        child: CompositedTransformTarget(
                                          link: layerLink,
                                          child: CustomEmojiItem(
                                            isBigImage: true,
                                            baseUrl: ele.baseUrl,
                                            sticker: item,
                                          ),
                                        ),
                                      ),
                                    );
                                  })
                                      .toList(),
                                ),
                              )),
                          Divider(indent: 20,)
                        ],
                      );
                    },
                  ),
                ],
              ),
            )
        ],
      );
}